import {playlistType} from "@src/services/music.ts";
import LivingIcon from "@src/components/LivingIcon";
import {useState} from "react";
import "./index.scss"
import MusicIcon from "@src/assets/music.svg?react"
import {useNavigate} from "react-router-dom";


interface SongListCardProps {
    playlist: playlistType
}

function convertToWan(num: number) {
    const result = Math.round((num / 10000) * 10) / 10;
    return result + "万";
}


export default function SongListCard({playlist}: SongListCardProps) {
    const navigate = useNavigate();
    const [isPlay] = useState(false);
    const PlaylistClick = () => {
        navigate("/home/music/songsList", {state: playlist});
    }
    return <div className="SongListCard">
        <div onClick={PlaylistClick}>
            <img src={playlist.coverImgUrl} alt=""/>
            <p><MusicIcon></MusicIcon> {convertToWan(playlist.playCount)}</p>

            <div>
                {isPlay && <LivingIcon></LivingIcon>}
            </div>
        </div>
        <p className="text-overflow-2">{playlist.name}</p>
    </div>
}
